
<script type="text/x-template" id="table-config-form">
    <div>
        <el-form :rules="rules" ref="codeGenForm" :model="data" label-width="170px">
            <el-form-item label="生成代码的数据库表">
                <div class="tab-info__virtual-tab-menu"
                     :style="{visibility: isPanelDragging ? 'hidden' : 'visible'}">
                    <affix
                            relative-element-selector=".tab-info__virtual-tab"
                            scroll-container-selector=".tab-info-wrapper"
                            style="width: 950px; display: inline-block;background: #fff; z-index: 1;"
                            :offset="{ top: 36, bottom: 50 }"
                    >
                        <el-button type="primary" @click="handleSelectDbTableStart">选择表</el-button>
                        <el-button @click="handleToggleAllPanel(false)">
                            展开所有
                        </el-button>
                        <el-button @click="handleToggleAllPanel(true)">
                            收起所有
                        </el-button>
                    </affix>
                </div>
                <cc-virtual-tab ref="virtualTab"
                                class="tab-info__virtual-tab"
                                :width="1080"
                                @add-panel="handleSelectDbTableStart"
                                @insert-panel="handleInsertPanel"
                                @remove-panel="handleRemovePanel"
                                @collapse="handleChangeCollapseState"
                                @uncollapse="handleChangeCollapseState"
                                @drag-start="handleDragStart"
                                @drag-end="handleDragEnd"
                                @show-all-panel="handleShowAllPanels"
                                @change-id-type="handleChangeIdType"
                                :panels="data.tableList"
                                :panel-data="tableListIndexed"
                >

                </cc-virtual-tab>
            </el-form-item>
        </el-form>
        <cc-db-table-selector-el
                v-if="showDbTableSelect"
                ref="dbTableSelector"
                :data-source="data.dataSourceConfig"
                :fetch-data-url="urls.listTable"
                @select-cancel="handleSelectDbTableCancel"
                @select-end="handleSelectDbTableEnd"
        />
    </div>
</script>

<script>
    Vue.component('table-config-form', {
        template: '#table-config-form',
        data() {
            return {
                ID_TYPE: 'AUTO',
                showDbTableSelect: false,
                isPanelDragging: false,
                tableListIndexed: {},
                urls: {
                    listTable: '/v1/codeGen/listTable',
                },
                rules: {
                    keyvalData: [
                        {required: true, message: '请输入要转化的key:val'}
                    ]
                }
            }
        },
        props: ['data'],
        computed: {},
        methods: {
            handleSelectDbTableCancel() {
                this.showDbTableSelect = false
                this.$refs.virtualTab.isDragging = false
            },
            handleSelectDbTableEnd(data) {
                data = this.filterSelectData(data)
                console.log(data)
                // 新添加的，将成为普通板块加在最后面
                const tableList = this.data.tableList
                const start = tableList.length - 1
                data.forEach(function (item, index) {
                    this.doInsertPanel(item, {
                        index: start + index
                    })
                }.bind(this))
                this.showDbTableSelect = false
                this.$refs.virtualTab.isDragging = false
            },
            handleChangeIdType(index, idType) {
                const tableList = this.data.tableList
                const item = tableList[index];
                const toBackItem = {
                    id: item.id,
                    label: item.label,
                    idType: idType,
                    parentType: 'group',
                    activeIndex: 0,
                    data: Object.assign({}, item.data, {idType: idType})
                }
                this.data.tableList = [].concat(tableList.slice(0, index), toBackItem, tableList.slice(index + 1))
            },
            handleDbTableSelectClose() {
                this.showDbTableSelect = false;
            },
            handleSelectDbTableStart: function () {
                this.showDbTableSelect = true;
            },
            handleRemoveTable(index) {
                this.data.tabList.splice(index, 1)
            },
            //过滤已选的数据
            filterSelectData(selectedData) {
                const tableList = this.data.tableList
                let fiterData = selectedData.filter(function (item) {
                    return !this.isContain(tableList, item)
                }.bind(this));
                return fiterData
            },
            isContain(tableList, eachSelectData) {
                let isContain = false
                try {
                    if (tableList) {
                        tableList.forEach(function (item, index) {
                            if (item && item.id === eachSelectData.id) {
                                isContain = true;
                                console.log(isContain)
                                throw new Error('contain break')
                            }
                        })
                    }
                } catch (e) {
                }
                return isContain;
            },
            handleInsertPanel(panel, dropInfo) {
                this.doInsertPanel(panel, dropInfo)
            },
            doInsertPanel(item, dropInfo) {
                const id = item.id
                const index = dropInfo.index

                const tableList = this.data.tableList
                let tableData = item.data;
                this.$set(tableData, 'tableConfigList', this.data.tableConfigList)
                //返回后台数据
                const toBackItem = {
                    id: id,
                    label: item.label,
                    idType: this.ID_TYPE,
                    parentType: 'group',
                    activeIndex: 0,
                    data: Object.assign({}, tableData, {idType: this.ID_TYPE})
                }
                //给子组件数据
                const toChildItem = {
                    id: id,
                    label: item.label,
                    idType: this.ID_TYPE,
                    parentType: 'group',
                    activeIndex: 0,
                    isCollapse: false,
                    panelList: this.data.tableConfigList
                }
                tableList.splice(index + 1, 0, toBackItem)
                this.$set(this.tableListIndexed, item.id, item)
                this.tableListIndexed[id] = Object.assign({}, toChildItem)
            },
            handleToggleAllPanel(isCollapse) {
                this.data.tableList.forEach(function (item) {
                    this.$set(item, 'isCollapse', isCollapse)
                }.bind(this))
            },
            handleChangeCollapseState(index) {
                const tableList = this.data.tableList
                const panelItem = tableList[index]
                this.$set(panelItem, 'isCollapse', !panelItem.isCollapse)
            },
            handleRemovePanel(index) {
                const tableList = this.data.tableList
                const panelItem = tableList[index]
                let msg = '是否确定删除 ' + panelItem.label
                this.$confirm(msg)
                        .then(function () {
                            this.doRemovePanel(index)
                        }.bind(this))
                        .catch(function () {

                        })
            },
            doRemovePanel(index) {
                const tableList = this.data.tableList
                tableList.splice(index, 1)

            },
            handleDragStart() {
                setTimeout(function () {
                    this.isPanelDragging = true
                }.bind(this))
            },
            handleDragEnd() {
                setTimeout(function () {
                    this.isPanelDragging = false
                }.bind(this))
            },
            handleShowAllPanels(index) {
                this.$set(this.data.tabList[index], 'isShowAll', true)
            },
            //校验
            validateFormData(cb) {
                this.$refs.codeGenForm.validate(function (valid) {
                    if (valid) {
                        const tableList = this.data.tableList
                        if (tableList.length === 0) {
                            this.$message({
                                type: 'error',
                                message: '请选择数据库表'
                            })
                            cb(true)
                        } else {
                            cb()
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请把表单填写完整'
                        })
                        cb(true)
                    }
                }.bind(this))
            },
        },
        watch: {},
        mounted() {

        },
        created() {
        }
    })
</script>
<style>
    .tab-info__virtual-tab-menu {
    }

    .tab-info__virtual-tab {
        display: inline-block;
        vertical-align: top;
    }
</style>
